<script setup lang="ts">
import { useUserStore } from '@renderer/stores/user'
import { storeToRefs } from 'pinia'
import HumbleiconsLogout from '~icons/humbleicons/logout'
import CatImage from '@renderer/components/CatImage.vue'

const { userName, userSign, isLogin, userAvatar } = storeToRefs(useUserStore())
const { logout } = useUserStore()
</script>

<template>
  <div class="settings-page">
    <div class="container">
      <div v-if="isLogin" class="user">
        <div class="left">
          <CatImage :src="userAvatar" />
          <div class="info">
            <div class="nickname">{{ userName }}</div>
            <div class="extra-info">{{ userSign }}</div>
          </div>
        </div>
        <div class="right">
          <button @click="logout">
            <HumbleiconsLogout class="svg-icon" />
            <span>登出</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.settings-page {
  display: flex;
  justify-content: center;
  .container {
    margin-top: 24px;
    width: 720px;
    .user {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--color-secondary-bg);
      color: var(--color-text);
      padding: 16px 20px;
      border-radius: 16px;
      margin-bottom: 48px;
      .left {
        display: flex;
        align-items: center;
        img {
          border-radius: 50%;
          height: 64px;
          width: 64px;
          &:not([src]) {
            display: none;
          }
        }
        .info {
          margin-left: 24px;
          .nickname {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 2px;
          }
          .extra-info {
            font-size: 13px;
            opacity: 0.68;
          }
        }
      }
      .right {
        button {
          font-size: 18px;
          color: var(--color-text);
          padding: 8px 12px;
          border-radius: 10px;
          font-weight: 600;
          &:hover {
            opacity: 1;
            background: #eaeffd;
            color: #335eea;
            transform: scale(1.06);
            .svg-icon {
              color: #335eea;
            }
          }
          .svg-icon {
            &:deep(path) {
              stroke-width: 3;
            }
          }
          span {
            margin-left: 4px;
          }
        }
      }
    }
  }
}
</style>
